<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>掘金</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="css/sy.css">
<style>
    
 .container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  background-color: white;
}
.navbar-brand {
  float: left;
  height: 50px;
  padding: 15px 15px;
  font-size: 18px;
  line-height: 20px;
}
.navbar-nav {
  margin: 7.5px -15px;
}
.navbar-nav > li > a {
  padding-top: 20px;
  padding-bottom: 20px;
  line-height: 20px;
}
.bottom1{
    margin-right: 10px;
    font-size: 20px;
    font-weight: 900;
    border-radius:10px;
  background-color: rgb(184, 231, 235);
}
.bottom2{
    font-size: 20px;
    font-weight: 900;
    border-radius:10px;
    border :solid     1px  rgb(0, 0, 0);
}
.search{
margin-top: 15px;
margin-right: 30px;
}
.mainmid {
    padding-left: 220px;
    height: 80px;
    width: 100%;
    margin:-25px;
    font-weight: lighter; 
      
}
.main{
    background-color: rgba(220, 243, 243, 0.918);
    width: 100%;
    height: 2000px;
    
}
.mainleft{
    margin-left: 220px;
    background-color:white;
    width: 40%;
    height: 2000px;
    position: relative;
    top: 30px;
    border-radius:20px;
    padding-top: 0;
}
.mainright{
    margin-left: 900px;
    background-color:rgb(255, 255, 255);
    width:20%;
    height:1970px;
    position: relative;
    top: -1970px;
    border-radius:20px;
}
.lan{
    width: 40%;
    height: 50px;
    position: relative;
    top: -40px;
    left: 15px;
    
}
.itemlist{
    border :solid     1px  rgba(220, 243, 243, 0.918);
    width: 100%;
    height: 130px;
    position: relative;
    top: -10px;
    ;
}
.t1{
    color: rgb(62, 170, 170);
    font-size: 7px;
    position: relative;
    top: 10px;
    left: -130px;
}
.t2{
    color: rgb(0, 0, 0);
    font-size: 18px;
    font-weight: 800;
    position: relative;
    top: 15px;
    left: -130px;    
}
.t3{
    color: rgb(62, 170, 170);
    font-size: 7px;
    position: relative;
    top: 22px;
    left: 12px;
}
.t11{
    
    color: rgb(62, 170, 170);
    font-size: 7px;
    position: relative;
    top: 12px;
    left: 12px;

}
.t22{
    color: rgb(0, 0, 0);
    font-size: 18px;
    font-weight: 800;
    position: relative;
    top: 15px;
    left: 12px;
}
.r1{
    border :solid     1px  rgba(220, 243, 243, 0.918);
    width: 100%;
    height: 645px;
    position: relative;
    top: 0px;
    ;
}
</style>

<body>
<div>
<div class="container">

  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
 
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
    
        <a class="navbar-brand" href="#"><img src="images/juejing.svg" alt="掘金" </a>

      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li>首页</a></li>
          <li><a href="#">沸点</a></li>
          <li><a href="#">话题</a></li>
          <li><a href="#">活动</a></li>

            <ul class="dropdown-menu">
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
<li class="search"><form role="search" data-v-20709686=""><input type="search" maxlength="32" placeholder="探索掘金" value="" class="search-input" data-v-20709686=""> <img src="images/sousuo.svg"></form></li>
          <li class="bottom1"><a href="../navbar-static-top/"role="button">写文章</a></li>
          <li class="bottom2"><a href="../navbar-fixed-top/"role="button">登录</a></li>
>
        </ul>
      </div>
    </div>
  </nav>




</div> 
<div class="mainmid">
    <ul class="nav navbar-nav">
        <li><a href="#">推荐</a></li>
        <li><a href="#">前端</a></li>
        <li><a href="#">后端</a></li>
        <li><a href="#">Android</a></li>
        <li><a href="#">iOS</a></li>
        <li><a href="#">人工智能</a></li>
        <li><a href="#">开发工具</a></li>
        <li><a href="#">代码人生</a></li>
        <li><a href="#">阅读</a></li>
      </ul>
</div>
<div class="main">
 <div class="mainleft">
     <div class="lan">
    <ul class="nav navbar-nav">
    <li><a href="#">热门</a></li>
    <li><a href="#">最新</a></li>
    <li><a href="#">热榜</a></li>

</div>
</ul>
                  <div class="itemlist">
    <div class="t1"><p>掘金酱 4天前</p></div>
    <div class="t2"><p>掘金技术征文|双节特别篇来啦！</p></div>
    <div class="t3"><p>
        中秋国庆月，无酒无诗，无相见，特为掘友备此篇！
         4天前</p></div>
    
                  </div>
<div class="itemlist">
    <div class="t11"><p>Gopal2小时前 面试</p></div>
    <div class="t22"><p>【面试说】一年半前端 Bigo 一二三 面</p></div>
    <div class="t3"><img src="images/zan.png"href="../navbar-static-top/"role="button"></div>
    
                  </div>
 <div class="itemlist">
    <div class="t11"><p>RicardoMJiang
        2小时前
        HTTPS</p></div>
    <div class="t22"><p>Android程序员需要了解的https与中间人攻击|掘金技术征文-双节特别篇</p></div>
    <div class="t3"><img src="images/zan.png"href="../navbar-static-top/"role="button"></div>
    
                  </div>
                  <div class="itemlist">
    <div class="t11"><p>Angus安格斯
        13小时前
        Vue.js</p></div>
    <div class="t22"><p>vue实战项目之购物app问题记录</p></div>
    <div class="t3"><img src="images/zan.png"href="../navbar-static-top/"role="button"></div>
    
                  </div>    
    <div class="itemlist">
    <div class="t11"><p>deniro
        2小时前
        架构</p></div>
    <div class="t22"><p>系统架构设计笔记（95）—— TCP 协议</p></div>
    <div class="t3"><img src="images/zan.png"href="../navbar-static-top/"role="button"></div>
    
                  </div>                         

 </div>
 <div class="mainright">
   <div class="r1">
<img src="images/r1.png"href="../navbar-static-top/"role="button">
   </div>
 </div>
</div>
</div>

</body>
</body>
</html>